<div fxLayout="column" fxLayoutAlign="space-between stretch" class="sidenav-menu">
    <mat-toolbar class="sidenav-left-toolbar">
        <div class="logo-wrapper">
            <div class="sidenav-logo"></div>
        </div>
    </mat-toolbar>

    <overall-balance></overall-balance>

    <mat-nav-list class="menu-mat-list" fxLayout="column">
        <ng-container *ngFor="let nav of navigation">
            <a mat-list-item [routerLink]="nav.link"
               (click)="(activeMediaQuery ? onMenuToggle.emit() : '')"
               routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <div fxFlex="column">
                    <mat-icon matListIcon>{{ nav.icon }}</mat-icon>
                    <div matLine class="text">{{ nav.name | translate }}</div>
                </div>
            </a>
            <div *ngIf="nav.separator" fxFlex></div>
        </ng-container>
    </mat-nav-list>
</div>
